html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #607d8b;
}

.container {
	position: relative;
	top: 50px;
}

.cup {
	position: relative;
	width: 280px;
	height: 300px;
	background: linear-gradient(to right, #f9f9f9, #d9d9d9);
	border-radius: 0 0 45% 45%;
}

.top {
	position: absolute;
	top: -30px;
	left: 0;
	width: 100%;
	height: 60px;
	background: linear-gradient(to right, #f9f9f9, #d9d9d9);
	border-radius: 50%;
}

.circle {
	position: absolute;
	top: 5px;
	left: 10px;
	width: calc(100% - 20px);
	height: 50px;
	background: linear-gradient(to left, #f9f9f9, #d9d9d9);
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
}

.tea {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(#c57e65, #e28462);
}

.handle {
	position: absolute;
	top: 40px;
	right: -70px;
	width: 120px;
	height: 140px;
	border: 25px solid #dcdcdc;
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-radius: 50%;
	transform: rotate(42deg);
}
.plate {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	height: 200px;
	background: linear-gradient(to right,#f9f9f9,#e7e7e7);
	border-radius: 50%;
	box-shadow: 0 35px 35px rgba(0,0,0,.2);
}
.plate::before{
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	border-radius: 50%;
	background: linear-gradient(to left,#f9f9f9,#e7e7e7);
}
.plate::after{
	content: '';
	position: absolute;
	top: 30px;
	left: 30px;
	right: 30px;
	bottom: 30px;
	border-radius: 50%;
	background: radial-gradient(rgba(0,0,0,.2) 25%,transparent,transparent);
}
.vapor {
	position: relative;
	display: flex;
	z-index: 1;
	padding: 0 20px;
}
.vapor span{
	position: relative;
	bottom: 50px;
	display: block;
	margin: 0 2px 50px;
	width: 8px;
	height: 120px;
	background-color: #fff;
	border-radius: 50%;
	animation: animate 5s linear infinite;
	opacity: 0;
	filter: blur(8px);
	animation-delay: calc(var(--i) * -0.5s);
	
}
@keyframes animate{
	0%{
		transform: translateY(0) scaleX(1);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	50%{
		transform: translateY(-150px) scaleX(5);
	}
	95% {
		opacity: 0;
	}
	100%{
		transform: translateY(-300px) scaleX(10);
	}
}



